<!--为了实现表格的代码复用，封装表格组件-->
<template>
  <div>
    <!--表格栏-->
    <el-table
      v-loading="loading"
      :data="data"
      :highlight-current-row="highlightCurrentRow"
      :border="border"
      :stripe="stripe"
      :show-overflow-tooltip="showOverflowTooltip"
      :max-height="maxHeight"
      :height="height"
      :size="size"
      :cell-style="{'text-align':'center'}"
      :align="align"
      style="width:100%;"
      :perms="perms"
      :attribute="attribute"
      :title="title"
      @selection-change="selectionChange"
      @current-change="handleCurrentChange"
      >
<!--      @selection-change="selectionChange"-->
<!--      @current-change="handleCurrentChange"
:element-loading-text="$t('action.loading')"-->

      <!--      暂时去掉box-->
      <!--      <el-table-column v-if="showBatchDelete & showOperation" type="selection" width="50"/>-->
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        header-align="center"
        align="left"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :min-width="column.minWidth"
        :fixed="column.fixed"
        :type="column.type"
        :formatter="column.formatter"
      />
      <el-table-column  width="180" header-align="center" align="center">
        <template slot-scope="scope">
          <el-button  type="text" @click="method(scope.$index, scope.row)" :btName="btName">{{btName}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="toolbar" style="padding:10px;">
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page="pageRequest.pageNumber"
        :page-size="pageRequest.pageSize"
        :total="data.length"
        style="float:right;"
        @current-change="refreshPageRequest"
      />
    </div>
    <el-dialog :title="btName" :visible.sync="UpdateFlag" center width="70%" append-to-body text-align="center" v-if="UpdateFlag" @close="afterCloseUpdate">
      <update-and-correct
        :element-id="elementId"
        :perms="perms"
        :updateLhsxbFlag="updateLhsxbFlag"
        :updateHjxwbFlag="updateHjxwbFlag"
        :updateStwhbFlag="updateStwhbFlag"
        :updateJkwhbFlag="updateJkwhbFlag"
        :updateHyxxbFlag="updateHyxxbFlag"
        :labelName="labelName"
        :btName="btName"
        :showdata="showdata"></update-and-correct>
    </el-dialog>
  </div>
</template>

<script>
  import UpdateAndCorrect from "@/views/Element/AddRecordEle/UpdateAndCorrect";

  export default {
    name: 'KtTable',
    components: {
      UpdateAndCorrect
    },
    props: {
      columns: Array, // 表格列配置
      data: {
        type:Array,
        default:[{}],
      }, // 表格分页数据
      perms:'',
      btName:'',
      attribute:'',
      title:'',
      size: { // 尺寸样式
        type: String,
        default: 'mini'
      },
      align: { // 文本对齐方式
        type: String,
        default: 'left'
      },
      maxHeight: { // 表格最大高度
        type: Number,
        default: 820
      },
      height: { // 表格最大高度
        type: Number,
        default: 250
      },
      showOperation: { // 是否显示操作组件
        type: Boolean,
        default: true
      },
      border: { // 是否显示边框
        type: Boolean,
        default: true
      },
      stripe: { // 是否显示斑马线
        type: Boolean,
        default: true
      },
      highlightCurrentRow: { // // 是否高亮当前行
        type: Boolean,
        default: true
      },
      showOverflowTooltip: { // 是否单行显示
        type: Boolean,
        default: true
      },
      showBatchDelete: { // 是否显示操作组件
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        radio: '',
        // 分页信息
        pageRequest: {
          pageNumber: 1,
          pageSize: 7
        },
        loading: false, // 加载标识
        selections: [],
        addParams:{
          labelName:''
        },
        labelName:'',
        elementId:{
          type: String,
          default: ''
        },
        UpdateFlag:false,
        updateLhsxbFlag: false,
        updateHjxwbFlag: false,
        updateStwhbFlag: false,
        updateJkwhbFlag: false,
        updateHyxxbFlag: false,
        showdata:{}
      }
    },
    mounted() {
      this.refreshPageRequest(1)
    },
    methods: {
      afterCloseUpdate: function () {
        this.updateLhsxbFlag = false
        this.updateHjxwbFlag = false
        this.updateStwhbFlag = false
        this.updateJkwhbFlag = false
        this.updateHyxxbFlag = false
      },
      method: function (index,row) {
        this.UpdateFlag = true
        this.elementId = row.baseinfoWzbm
        this.labelName = this.attribute
        if (this.title === "理化属性表") {
          this.updateLhsxbFlag = true
          this.showdata=row
        } else if (this.title === "环境行为表") {
          this.updateHjxwbFlag = true
          this.showdata=row
        } else if (this.title === "生态危害表") {
          this.updateStwhbFlag = true
          this.showdata=row
        } else if (this.title === "健康危害表") {
          this.updateJkwhbFlag = true
          this.showdata=row
        } else {
          this.updateHyxxbFlag = true
          this.showdata=row
        }
      },
      findPage: function() {
        this.loading = true
        const callback = res => {
          this.loading = false
        }
        this.$emit('findPage', { pageRequest: this.pageRequest, callback: callback })
      },
      // 选择切换
      selectionChange: function(selections) {
        this.selections = selections
        this.$emit('selectionChange', { selections: selections })
      },
      // 选择切换
      handleCurrentChange: function(val) {
        this.$emit('handleCurrentChange', { val: val })
      },
      // 换页刷新
      refreshPageRequest: function(pageNumber) {
        this.pageRequest.pageNumber = pageNumber
        this.findPage()
      }
    }
  }
</script>

<style scoped>

</style>
